<template>
  <el-scrollbar class="scrollbar">
    <div class="padding grid-content">
      <grid-item-one title="区域能源消耗总量"></grid-item-one>
      <div class="flex gap-4 mt-4">
        <div class="w-[calc(100%-43rem)]">
          <grid-item-two title="区域双控控制形势"></grid-item-two>
        </div>
        <div class="w-2xl" ref="fakeGap">
          <grid-item-three title="区域能源消耗排行"></grid-item-three>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import GridItemOne from './grid-item-one'
import GridItemTwo from './grid-item-two'
import GridItemThree from './grid-item-three'

import mixinFakeGap from '@/mixins/mixin-fake-gap';

export default {
  name: 'energy-efficiency-analysis-area',
  mixins: [mixinFakeGap],
  components: {
    GridItemOne,
    GridItemTwo,
    GridItemThree
  },
  mounted () {
    if (this.$refs.fakeGap) {
      this.fixFakeGap('marginLeft', this.$refs.fakeGap)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    ::v-deep .content-block {
      background: white;
      border-radius: 4px;
    }

    .block---1 {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }
  }
</style>
